﻿<style>
    .xm-select-dl {
        width: 380px !important;
    }

    .xm-select-linkage .xm-select-linkage-group li {
        height: 24px;
        line-height: 24px;
    }

        .xm-select-linkage .xm-select-linkage-group li span {
            line-height: 24px;
        }
</style>
<script type="text/html" template>
    <title>{{layui.setter.MenuName}}-{{layui.setter.name}}</title>
</script>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <script type="text/html" template>
            <a><cite>{{layui.setter.MenuName}}</cite></a>
        </script>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list">
            <div class="layui-form-item">
                <label class="layui-form-label">店铺</label>
                <div class="layui-input-inline">
                    <select name="store" id="store" xm-select="store" xm-select-radio="" xm-select-search xm-select-skin="default">
                        <option value=""></option>
                    </select>
                </div>
                <label class="layui-form-label">供应商</label>
                <div class='layui-input-inline'>
                    <select name="selsupplier" xm-select="selsupplier" xm-select-radio="" xm-select-search xm-select-skin="default">
                        <option value=""></option>
                    </select>
                    <input type="hidden" name="supplier" id="supplier">
                </div>
                <label class="layui-form-label">下单日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test6" readonly="readonly" placeholder=" - ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="good" name="good" placeholder="编码/名称">
                </div>
                <label class="layui-form-label">发货方式</label>
                <div class="layui-input-inline">
                    <select id="mode" name="mode">
                        <option value=""></option>
                        <option value="1">自提</option>
                        <option value="2">邮寄</option>
                    </select>
                </div>
                <label class="layui-form-label">发货状态</label>
                <div class="layui-input-inline">
                    <select id="state" name="state">
                        <option value=""></option>
                        <option value="1">待发货</option>
                        <option value="2">已发货</option>
                    </select>
                </div>
                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>

        <div class="layui-card-body">
            <!--<div style="padding-bottom: 10px;">
            </div>-->
            <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
        </div>
    </div>
</div>
<script>

    var form, admin, table, view, formSelects, $;
    layui.use(['admin', 'table', 'form', 'formSelects', 'laydate'], function () {

        $ = layui.$;
        admin = layui.admin;
        view = layui.view;
        table = layui.table;
        form = layui.form;
        formSelects = layui.formSelects;
        var laydate = layui.laydate;

        var nowdays = new Date(); 
 
        var year = nowdays.getFullYear();
        var month = nowdays.getMonth();
        if(month==0){
            month = 12;
            year = year-1;
 
        }
        if(month<10){
            month = '0'+month;
        }
            
        var myDate = new Date(year,month,0);
 
        var startDate = year + '-' + month + '-01'; //上个月第一天
        var endDate = year + '-' + month + '-' + myDate.getDate();//上个月最后一天

        laydate.render({
            elem: '#test6',
            range: '~', //指定元素
            value: startDate + ' ~ ' + endDate,
            max: 0 
        });

        form.render(null, 'app-content-list');


        formSelects.config('store', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        var defaultstore = "";
        admin.req({
            url: layui.setter.APIUrl + '/shop/storeMgr/customerQueryChildren2', //实际使用请改成服务端真实接口
            type: 'post',
            async: false,
            done: function (res) {
                layui.formSelects.data('store', 'local', {
                    arr: res.Data,
                    linkage: true,
                    linkageWidth: 120
                });
            }
        });
        formSelects.on('store', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                if (val.value.indexOf("/") <= 0) {  //多级选择时,第一级无法选中
                    isAdd = false;
                    return false;
                }
            }
        });


        formSelects.config('selsupplier', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/supplierMgr/customerQueryChildren2', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('selsupplier', 'local', {
                    arr: res.Data,
                    linkage: true,
                    linkageWidth: 100
                });
            }
        });
        formSelects.on('selsupplier', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                if (val.value.indexOf("/") > 0 && ((val.value.split('/')).length - 1) >= 2) {  //多级选择时,第一级无法选中  供应商前两级都无法选中
                    var value = val.value.split('/')[val.value.split('/').length - 1];
                    $("#supplier").val(value);  //实际选中效果为多个ID组合 ‘id1/id2/id3’,取最后一个
                } else {
                    isAdd = false;
                    return false;
                }
            } else {
                $("#supplier").val("");
            }
        });

        var field = {};
        field["begtime"] = startDate;
        field["endtime"] = endDate;

        //文章管理
        table.render({
            elem: '#LAY-app-content-list'
            , toolbar: true  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , method: "post"
            , url: layui.setter.APIUrl + '/shop/ReportMgr/OrderGoodTotal'
            , where: field
            , headers: { //通过 request 头传递
                Authorization: "bearer " + layui.data('layuiAdmin').access_token
            }
            , parseData: function (res) { //res 即为原始返回的数据 
                return {
                    "ResultCode": res.ResultCode, //解析接口状态
                    "ResultInfo": res.ResultInfo, //解析提示文本
                    "count": res.Data.TotalRecordCount, //解析数据长度
                    "Data": res.Data.Items //解析数据列表 
                };
            }
        , cols: [[
		{ field: 'GoodCode', title: '商品编码', minWidth: 80 },
		{ field: 'GoodName', title: '商品名称', minWidth: 80 },
		{
		    field: 'Count', title: '数量', minWidth: 80, templet: function (d) {
		        var html = "<span style='font-weight:bold;font-size:1.1em'>" + d.Count + "</span>";
		        return html;
		    }
		},
		{
		    field: 'Amount', title: '商品总额', minWidth: 80, templet: function (d) {
		        var html = "<span style='color:#FF5722;'>￥</span><span style='color:#FF5722;font-weight:bold;font-size:1.1em'>" + d.Amount + "</span>";
		        return html;
		    }
		},
      //{
      //    title: '操作', width: 80, fixed: 'right', align: 'center', templet: function (d) {
      //        var strRtn = "";
      //            strRtn += "<a class=\"layui-btn layui-btn-primary layui-btn-xs\" lay-event=\"view\">查看</a> ";
      //        return strRtn;
      //    }
      //}
        ]]
        , page: true
        , limit: 20
        , limits: [20, 50, 75, 100]
        , text: {
            none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 text: '对不起，加载出现异常！'
        }
        });

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            var dataTime = $("#test6").val();
            if (dataTime) {
                var times = dataTime.split('~');
                field["begtime"] = times[0].trim();
                field["endtime"] = times[1].trim();

                var month = YearsBetw(field["begtime"], field["endtime"]);
                if (month >= 1) {
                    return layer.msg("开始结束日期间隔不可超过一年");
                }

            }
            else {
                return layer.msg("请选择日期");
            }
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field
            });
        });

    });

    layui.data.setActive = function () {

        layui.use(['form', 'admin', 'table'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var view = layui.view;
            var table = layui.table;
            var active = {
            };

            $('.layui-btn.layuiadmin-btn-list').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    }


    //返回两个日期相差的年数
    function YearsBetw(date1, date2) {
        var begdate = new Date(date1);
        begdate.setFullYear(begdate.getFullYear() + 1);

        var enddate = new Date(date2);

        if (begdate.getTime() < enddate.getTime()) {
            return 1;
        }
        return 0;
    }

</script>
